<div class="text-center bg-primary container-fluid">
    <br>
    <h1><?php echo INSTALL_STEP4_TITLE;?></h1>
    <h3><?php echo INSTALL_STEP4_SUBTITLE;?></h3>
    <h5><?php echo INSTALL_STEP4_DESCRIPTION;?></h5>
    <br>
</div>
<div align="center">
    <h3><?php echo INSTALL_STEP4_INPUT_TITLE;?></h3>
    <div class="input-control has-icon-left" style="width: 75%">
        <input id="inputUser" type="text" class="form-control"
            placeholder="<?php echo INSTALL_STEP4_INPUT1_HINT;?>">
        <label for="inputUser" class="input-control-icon-left"><i class="icon-user text-primary"></i></label>
    </div>
    <br>
    <div class="input-control has-icon-left" style="width: 75%">
        <input id="inputName" type="text" class="form-control"
            placeholder="<?php echo INSTALL_STEP4_INPUT2_HINT;?>">
        <label for="inputName" class="input-control-icon-left"><i class="icon-user text-primary"></i></label>
    </div>
    <br>
    <div class="input-control has-icon-left" style="width: 75%">
        <input id="inputPass" type="text" class="form-control"
            placeholder="<?php echo INSTALL_STEP4_INPUT3_HINT;?>">
        <label for="inputPass" class="input-control-icon-left"><i class="icon-key text-primary"></i></label>
    </div>
    <br>
    <div class="input-control has-icon-left" style="width: 75%">
        <input id="inputMail" type="text" class="form-control"
            placeholder="<?php echo INSTALL_STEP4_INPUT4_HINT;?>">
        <label for="inputMail" class="input-control-icon-left"><i class="icon-envelope text-primary"></i></label>
    </div>
    <br>
</div>
<div class="text-center bg-primary container-fluid">
    <br>
    <div align="center">
        <button class="btn btn-primary btn-lg" id="back"><?php echo INSTALL_BUTTON_BACK;?></button>
        <button class="btn btn-primary btn-lg" id="next"><?php echo INSTALL_BUTTON_NEXT;?></button>
        <br>
    </div>
    <br>
</div>
<script>
    $(document).ready(function () {
        $("#back").click(function () {
            self.window.location = "./?/install&step=3";
        });
        $("#next").click(function () {
            creAdmin();
        });
        function creAdmin() {
            new $.zui.Messager("<?php echo INSTALL_STEP4_CRE_RUNNING;?>",{
                type:"info"
            }).show();
            var user = document.getElementById("inputUser").value;
            var name = document.getElementById("inputName").value;
            var pass = document.getElementById("inputPass").value;
            var mail = document.getElementById("inputMail").value;
            $.post("./?/install",{
                command:"creAdmin",
                user:user,
                name:name,
                pass:pass,
                mail:mail
            },function (data) {
                value = JSON.parse(data);
                if (value.status === "successful"){
                    new $.zui.Messager("<?php echo INSTALL_STEP4_CRE_SUCCESSFUL;?>",{
                        type:"success"
                    }).show();
                    setTimeout(function () {
                        self.window.location = "./?/install&step=5";
                    },2000);
                }else if (value.status === "connect_error"){
                    new $.zui.Messager("<?php echo INSTALL_STEP4_CRE_CONN_ERROR;?>",{
                        type:"danger"
                    }).show();
                    console.log(value.reason);
                }else if (value.status === "run-error"){
                    new $.zui.Messager("<?php echo INSTALL_STEP4_CRE_RUN_ERROR;?>",{
                        type:"danger"
                    }).show();
                    console.log(value.reason);
                }else {
                    new $.zui.Messager("<?php echo INSTALL_STEP4_CRE_UNKNOWN_ERROR;?>",{
                        type:"danger"
                    }).show();
                    console.log(data);
                }
            })
        }
    });
</script>